{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
    首页
{% endblock %}

{% block header_name %}
    首页
{% endblock %}

{% block body %}
    <!-- Dashboard Counts Section-->
    <section class="dashboard-counts no-padding-bottom">
    <div class="container-fluid">
      <div class="row bg-white has-shadow">
        <!-- Item -->
        <div class="col-xl-3 col-sm-6">
          <div class="item d-flex align-items-center">
            <div class="icon bg-violet"><i class="icon-user"></i></div>
            <div class="title"><span>总学生数</span>
              <div class="progress">
                <div role="progressbar" style="width: 25%; height: 4px;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-violet"></div>
              </div>
            </div>
            <div class="number"><strong>{{ student_nums }}</strong></div>
          </div>
        </div>
        <!-- Item -->
        <div class="col-xl-3 col-sm-6">
          <div class="item d-flex align-items-center">
            <div class="icon bg-red"><i class="icon-padnote"></i></div>
            <div class="title"><span>总活动数</span>
              <div class="progress">
                <div role="progressbar" style="width: 70%; height: 4px;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-red"></div>
              </div>
            </div>
            <div class="number"><strong>{{ activity_nums }}</strong></div>
          </div>
        </div>
        <!-- Item -->
        <div class="col-xl-3 col-sm-6">
          <div class="item d-flex align-items-center">
            <div class="icon bg-green"><i class="icon-bill"></i></div>
            <div class="title"><span>管理员数</span>
              <div class="progress">
                <div role="progressbar" style="width: 40%; height: 4px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-green"></div>
              </div>
            </div>
            <div class="number"><strong>{{ admin_nums }}</strong></div>
          </div>
        </div>
        <!-- Item -->
        <div class="col-xl-3 col-sm-6">
          <div class="item d-flex align-items-center">
            <div class="icon bg-orange"><i class="icon-check"></i></div>
            <div class="title"><span>等待审核</span>
              <div class="progress">
                <div role="progressbar" style="width: 50%; height: 4px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-orange"></div>
              </div>
            </div>
            <div class="number"><strong>{{ verifying_admin_nums }}</strong></div>
          </div>
        </div>
      </div>
    </div>
    </section>
  <br>
    <!-- Charts Section-->
    <section class="charts">
      <div class="container-fluid">
        <div class="row">
          <!-- Line Charts-->
          <div class="col-lg-8">
            <div class="line-chart-example card">
              <div class="card-close">
                <div class="dropdown">
                  <button type="button" id="closeCard1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle"><i class="fa fa-ellipsis-v"></i></button>
                  <div aria-labelledby="closeCard1" class="dropdown-menu dropdown-menu-right has-shadow"><a href="#" class="dropdown-item remove"> <i class="fa fa-times"></i>Close</a><a href="#" class="dropdown-item edit"> <i class="fa fa-gear"></i>Edit</a></div>
                </div>
              </div>
              <div class="card-header d-flex align-items-center">
                <h3 class="h4">学时排名</h3>
              </div>
              <div class="card-body">
                <div id="bar" style="width:700px; height:500px;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


{% endblock %}

{% block js %}
{#    <script src={% static 'js/charts-home.js' %}></script>#}
{#    <script src="https://cdn.bootcss.com/Chart.js/2.7.2/Chart.min.js"></script>#}
{#    <script src="{% static 'js/charts-custom.js' %}"></script>#}
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
  <script>
    var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
      $(function () {
        $.ajax({
            type: "GET",
            url: "/chart/",
            dataType: 'json',
            success: function (result) {
                chart.setOption(result.data);
            }
        });
      })
  </script>
{% endblock %}
